<template>
  <div class="about">
    <div>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success" v-if="this.loginUser.roleName=='业务员'||this.loginUser.roleName=='主任'||this.loginUser.roleName=='财务总监'">审核</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
    </div>
    <hr>
    <div>
      <el-form :inline="true" :model="leaveForm" class="demo-form-inline">
        <el-form-item label="请假人">
          <el-input v-model="leaveForm.username" placeholder="请假人"></el-input>
        </el-form-item>
        <el-form-item label="请假天数">
          <el-input v-model="leaveForm.holiday" placeholder="请假天数"></el-input>
        </el-form-item>
        <el-form-item label="请假原因">
          <el-input v-model="leaveForm.cause" placeholder="请假原因"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交申请</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
<!--大文件上传      -->
        <uploader :options="options" class="uploader-example"
                  @file-added="onFileAdded">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>拖拽文件到这里</p>
            <uploader-btn>选择文件</uploader-btn>
<!--            <uploader-btn :attrs="attrs">选择图片</uploader-btn>-->
<!--            <uploader-btn :directory="true">选择目录</uploader-btn>-->
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
    </div>

  </div>
</template>

<script>
import SparkMD5 from 'spark-md5';
//npm install vue-simple-uploader spark-md5
export default {
  data () {
    return {
      options: {
        target: 'http://127.0.0.1:8081/file/postFileUpload', // 目标上传 URL
        chunkSize: '10240000',   //分块大小
        fileParameterName: 'file', //上传文件时文件的参数名，默认file
        maxChunkRetries: 3,  //最大自动失败重试上传次数
        testChunks: false,     //是否开启服务器分片校验
      },
      attrs: {
        accept: 'image/*'
      },
      leaveForm: {
        username: '',
        holiday: '',
        cause:''
      },

      //模拟的后台登录成功后返回的用户数据
      loginUser:{
        username:'zhangsan',
        roleName:'业务员'
      }
    }
  },
  methods:{
    onFileAdded(file){
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file);
      fileReader.onload = e => {
        const md5 = SparkMD5.hashBinary(e.target.result);
        console.log(md5);
        file.uniqueIdentifier = md5;
      }
    },
    onSubmit(){
      this.axios.post("http://127.0.0.1:8083/ask4Leave",this.leaveForm).then(resp=>{
        alert(resp.data)
      })
    }
  }
}
</script>

<style>
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>